<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }

        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }

        .talk_sub {
            width: 56px;
            height: 30px;
            float: left;
            margin-left: 10px;
        }

        .atalk {
            margin: 10px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #ffffff;
            padding: 5px 10px;
        }

        .btalk {
            margin: 10px;
            text-align: right;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #ffffff;
            padding: 5px 10px;
        }
    </style>

    <script src="../../juqerys/js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript">
        // window.onload = function () {
        //     var oWord = document.getElementById('words');
        //     var oWho = document.getElementById('who');
        //     var oTalk = document.getElementById('talkwords');
        //     var oBtn = document.getElementById('talksub');
        //
        //     oBtn.onclick = function () {
        //         var sVa = oWho.value;
        //
        //         var massage = oTalk.value;
        //
        //         if (massage == '') {
        //             alert('请输入内容');
        //             return;
        //         }
        //
        //         var SendManage = ''
        //
        //         if (sVa == 0) {
        //             SendManage = '<div class="atalk"><span>' + massage + '</span></div>';
        //         } else {
        //             SendManage = '<div class="btalk"><span>' + massage + '</span></div>';
        //         }
        //
        //         oWord.innerHTML += SendManage
        //         oTalk.value = ''
        //
        //
        //     }
        //
        // }

        $(function () {
            var $Who = $('#who');
            var $Words = $('#words');
            var $Sub = $('#talksub');
            var $Massage = $('#talkwords');

            $Sub.click(function () {

                var massage = $Massage.val();
                $Massage.val('');

                if (massage === "") {
                    alert("请输入内容");
                    return;
                }

                if ($Who.val() === '0') {
                    $Words.html($Words.html() + '<div class="atalk"><span>A说：' + massage + '</span></div>')
                }else if ($Who.val() === '1') {
                    $Words.html($Words.html() + '<div class="btalk"><span>A说：' + massage + '</span></div>')
                }
            })


        })



    </script>
</head>
<body>
<div class="talk_con">
    <div class="talk_show" id="words">
        <div class="atalk"><span>A说：吃饭了吗？</span></div>
        <div class="btalk"><span>B说：还没呢，你呢？</span></div>
    </div>
    <div class="talk_input">
        <select class="whotalk" id="who">
            <option value="0">A说：</option>
            <option value="1">B说：</option>
        </select>
        <input type="text" class="talk_word" id="talkwords">
        <input type="button" value="发送" class="talk_sub" id="talksub">
    </div>
</div>
</body>
</html>